{extend name="common/main"/}

{block name="body"}
	<script type="text/javascript" src="__COMMON__/lib/uploadify/jquery.uploadify.min.js"></script>
	<div class="main-title cf">
		<h2>{:lang("_PLUGIN_CONFIGURATION_")}<small>[ {$data.title} ]</small></h2>
	</div>
    <div class="with-padding">
    <form action="{:Url('saveConfig')}" class="form-horizontal" method="post">
    {empty name="custom_config"}
    {foreach name="data['config']" item="form" key="o_key"}
        <div class="form-item builder_item">
        <label class="item-label">
            {$form.title|default=''}
            {present name="form.tip"}
                <span class="check-tips">{$form.tip}</span>
            {/present}
        </label>
        {switch name="form.type"}
        {case value="text"}
            <div class="controls">
                <input type="text" name="config[{$o_key}]" class="form-control text form-input-width" value="{$form.value}">
            </div>
        {/case}
        {case value="password"}
            <div class="controls">
                <input type="password" name="config[{$o_key}]" class="form-control text input-large form-input-width" value="{$form.value}">
            </div>
        {/case}
        {case value="hidden"}
            <input type="hidden" name="config[{$o_key}]" value="{$form.value}">
        {/case}
        {case value="radio"}
            <div class="controls">
                {foreach name="form.options" item="opt" key="opt_k"}
                    <label class="radio-inline">
                        <input type="radio" name="config[{$o_key}]" value="{$opt_k}" {eq name="form.value" value="$opt_k"} checked{/eq}>{$opt}
                    </label>
                {/foreach}
            </div>
        {/case}
        {case value="checkbox"}
            <div class="controls">
                {foreach name="form.options" item="opt" key="opt_k"}
                    <label class="checkbox-inline">
                        {php}
                            is_null($form["value"]) && $form["value"] = array();
                        {/php}
                        <input type="checkbox" name="config[{$o_key}][]" value="{$opt_k}" {in name="opt_k" value="$form.value"} checked{/in}>{$opt}
                    </label>
                {/foreach}
            </div>
        {/case}
        {case value="select"}
            <div class="controls">
                <select name="config[{$o_key}]" class="form-control">
                    {foreach name="form.options" item="opt" key="opt_k"}
                        <option value="{$opt_k}" {eq name="form.value" value="$opt_k"} selected{/eq}>{$opt}</option>
                    {/foreach}
                </select>
            </div>
        {/case}
        {case value="textarea"}
            <div class="controls">
                <textarea name="config[{$o_key}]" class="form-control form-text-area-size">{$form.value}</textarea>
            </div>
        {/case}
        {case value="picture_union"}
            <div class="controls">
                <input type="file" id="upload_picture_{$o_key}">
                <input type="hidden" name="config[{$o_key}]" id="cover_id_{$o_key}" value="{$form.value}"/>
                <div class="upload-img-box">
                    {notempty name="form['value']"}
                        {php} $mulimages = explode(",", $form["value"]); {/php}
                        {foreach name="mulimages" item="one"}
                            <div class="upload-pre-item" val="{$one}">
                                <img src="{$one|get_cover='path'}"  ondblclick="removePicture{$o_key}(this)"/>
                            </div>
                        {/foreach}
                    {/notempty}
                </div>
            </div>
            <script type="text/javascript">
                //上传图片
                /* 初始化上传插件 */
                $("#upload_picture_{$o_key}").uploadify({
                    "height"          : 30,
                    "swf"             : "__COMMON__/lib/uploadify/uploadify.swf",
                    "fileObjName"     : "download",
                    "buttonText"      : {:lang("_UPLOAD_PICTURES_WITH_DOUBLE_")},
                    "uploader"        : "{:Url('File/uploadPicture',array('session_id'=>session_id()))}",
                    "width"           : 120,
                    'removeTimeout'   : 1,
                    'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                    "onUploadSuccess" : uploadPicture{$o_key},
                'onFallback' : function() {
                    alert('{:lang("_AN_INCOMPATIBLE_VERSION_OF_THE_FLASH_IS_NOT_DETECTED_")}.');
                }
                });

                function uploadPicture{$o_key}(file, data){
                    var data = $.parseJSON(data);
                    var src = '';
                    if(data.status){
                        src = data.url || '/' + data.path
                        $("#cover_id_{$o_key}").parent().find('.upload-img-box').append(
                                '<div class="upload-pre-item" val="' + data.id + '"><img src="/' + src + '" ondblclick="removePicture{$o_key}(this)"/></div>'
                        );
                        setPictureIds{$o_key}();
                    } else {
                        updateAlert(data.info);
                        setTimeout(function(){
                            $('#top-alert').find('button').click();
                            $(that).removeClass('disabled').prop('disabled',false);
                        },1500);
                    }
                }
                function removePicture{$o_key}(o){
                    var p = $(o).parent().parent();
                    $(o).parent().remove();
                    setPictureIds{$o_key}();
                }
                function setPictureIds{$o_key}(){
                    var ids = [];
                    $("#cover_id_{$o_key}").parent().find('.upload-img-box').find('.upload-pre-item').each(function(){
                        ids.push($(this).attr('val'));
                    });
                    if(ids.length > 0)
                        $("#cover_id_{$o_key}").val(ids.join(','));
                    else
                        $("#cover_id_{$o_key}").val('');
                }
            </script>
        {/case}
        {case value="group"}
            <ul class="nav nav-secondary">
                {volist name="form.options" id="li"}
                <li {eq name="i" value="1"}class="active"{/eq} >
                    <a data-target="#tab{$i}" data-toggle="tab" href="#tab{$i}">{$li.title}</a>
                </li>
                {/volist}
            </ul>
            <div class="tab-content">
                {volist name="form.options" id="tab"}
                    <div id="tab{$i}" class="tab-pane {eq name="i" value="1"}active{/eq} tab{$i}">
                    {foreach name="tab['options']" item="tab_form" key="o_tab_key"}
                        <label class="item-label">
                            {$tab_form.title|default=''}
                            {present name="tab_form.tip"}
                                <span class="check-tips">{$tab_form.tip}</span>
                            {/present}
                        </label>
                        <div class="controls">
                            {switch name="tab_form.type"}
                                {case value="text"}
                                    <input type="text" name="config[{$o_tab_key}]" class="text input-large form-control form-input-width" value="{$tab_form.value}">
                                {/case}
                                {case value="password"}
                                    <input type="password" name="config[{$o_tab_key}]" class="text input-large form-control form-input-width" value="{$tab_form.value}">
                                {/case}
                                {case value="hidden"}
                                    <input type="hidden" name="config[{$o_tab_key}]" value="{$tab_form.value}">
                                {/case}
                                {case value="radio"}
                                    {foreach name="tab_form.options" item="opt" key="opt_k"}
                                        <label class="radio-inline">
                                            <input type="radio" name="config[{$o_tab_key}]" value="{$opt_k}" {eq name="tab_form.value" value="$opt_k"} checked{/eq}>{$opt}
                                        </label>
                                    {/foreach}
                                {/case}
                                {case value="checkbox"}
                                    {foreach name="tab_form.options" item="opt" key="opt_k"}
                                        <label class="checkbox-inline">
                                            {php} is_null($tab_form["value"]) && $tab_form["value"] = array();{/php}
                                            <input type="checkbox" name="config[{$o_tab_key}][]" value="{$opt_k}" {in name="opt_k" value="$tab_form.value"} checked{/in}>{$opt}
                                        </label>
                                    {/foreach}
                                {/case}
                                {case value="select"}
                                    <select name="config[{$o_tab_key}]">
                                        {foreach name="tab_form.options" item="opt" key="opt_k"}
                                            <option value="{$opt_k}" {eq name="tab_form.value" value="$opt_k"} selected{/eq}>{$opt}</option>
                                        {/foreach}
                                    </select>
                                {/case}
                                {case value="textarea"}
                                    <label class="textarea input-large">
                                        <textarea name="config[{$o_tab_key}]" class="form-control form-text-area-size">{$tab_form.value}</textarea>
                                    </label>
                                {/case}
                                {case value="picture_union"}
                                    <div class="controls">
                                        <input type="file" id="upload_picture_{$o_tab_key}">
                                        <input type="hidden" name="config[{$o_tab_key}]" id="cover_id_{$o_tab_key}" value="{$tab_form.value}"/>
                                        <div class="upload-img-box">
                                            <notempty name="tab_form['value']">
                                                <php> $mulimages = explode(",", $tab_form["value"]); </php>
                                                <foreach name="mulimages" item="one">
                                                    <div class="upload-pre-item" val="{$one}">
                                                        <img src="{$one|get_cover='path'}"  ondblclick="removePicture{$o_tab_key}(this)"/>
                                                    </div>
                                                </foreach>
                                            </notempty>
                                        </div>
                                    </div>
                                    <script type="text/javascript">
                                        //上传图片
                                        /* 初始化上传插件 */
                                        $("#upload_picture_{$o_tab_key}").uploadify({
                                            "height"          : 30,
                                            "swf"             : "__COMMON__/lib//uploadify/uploadify.swf",
                                            "fileObjName"     : "download",
                                            "buttonText"      : {:lang("_UPLOAD_PICTURES_WITH_DOUBLE_")},
                                            "uploader"        : "{:Url('api/File/uploadPicture',array('session_id'=>session_id()))}",
                                            "width"           : 120,
                                            'removeTimeout'   : 1,
                                            'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                                            "onUploadSuccess" : uploadPicture{$o_tab_key},
                                        'onFallback' : function() {
                                            alert('{:lang("_AN_INCOMPATIBLE_VERSION_OF_THE_FLASH_IS_NOT_DETECTED_")}.');
                                        }
                                        });

                                        function uploadPicture{$o_tab_key}(file, data){
                                            var data = $.parseJSON(data);
                                            var src = '';
                                            if(data.status){
                                                src = data.url || '/' + data.path
                                                $("#cover_id_{$o_tab_key}").parent().find('.upload-img-box').append(
                                                        '<div class="upload-pre-item" val="' + data.id + '"><img src="/' + src + '" ondblclick="removePicture{$o_tab_key}(this)"/></div>'
                                                );
                                                setPictureIds{$o_tab_key}();
                                            } else {
                                                updateAlert(data.info);
                                                setTimeout(function(){
                                                    $('#top-alert').find('button').click();
                                                    $(that).removeClass('disabled').prop('disabled',false);
                                                },1500);
                                            }
                                        }
                                        function removePicture{$o_tab_key}(o){
                                            var p = $(o).parent().parent();
                                            $(o).parent().remove();
                                            setPictureIds{$o_tab_key}();
                                        }
                                        function setPictureIds{$o_tab_key}(){
                                            var ids = [];
                                            $("#cover_id_{$o_tab_key}").parent().find('.upload-img-box').find('.upload-pre-item').each(function(){
                                                ids.push($(this).attr('val'));
                                            });
                                            if(ids.length > 0)
                                                $("#cover_id_{$o_tab_key}").val(ids.join(','));
                                            else
                                                $("#cover_id_{$o_tab_key}").val('');
                                        }
                                    </script>
                                {/case}
                            {/switch}
                        </div>
                    {/foreach}
            </div>
            {/volist}
        </div>
        {/case}
        {/switch}

        </div>
    {/foreach}
    {else /}
    {present name="custom_config"}
        {$custom_config}
    {/present}
    {/empty}

    <div style="margin-top: 10px">

        <input type="hidden" name="id" value="{:input('id')}" readonly>
        <button type="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">{:lang("_SURE_WITH_SPACE_")}</button>
        <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">{:lang("_RETURN_WITH_SPACE_")}</button>
        </div>
    </div>

    </form>
    </div>

{/block}

{block name="script"}
<script type="text/javascript" charset="utf-8">
	if($('ul.tab-nav').length){
		//当有tab时，返回按钮不显示
		$('.btn-return').hide();
	}

</script>
{/block}
